<template>
    <div>
         <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>公告管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 添加轮播图 -->
        <el-button style="margin-top:10px" size="small" type="danger" icon="el-icon-plus" @click="addClick()">
        添加公告</el-button>

        <el-alert style="margin-top:10px"
            title="首页展示，请合理设置权重,从1开始，权重越小，越优先展示！"
            type="success">
        </el-alert>
        <!--列表-->
    <el-table
        :data="tableForm"
        style="width: 100%">
              
              
          <el-table-column
              prop="name"
              label="名称"
             >
          </el-table-column>

          <el-table-column
              prop="content"
              label="内容"
              width="300px">
          </el-table-column>

          <el-table-column
              prop="createTime"
              label="发布时间">
          </el-table-column>

          <el-table-column
              prop="isred"
              label="热度">
               <template slot-scope="scope">
                      <el-tag :type="scope.row.isred == '1'?'danger':'info'" effect="dark" >{{scope.row.isred == '1'?'强':'弱'}}</el-tag>
              </template>
          </el-table-column>

            <el-table-column
              prop="state"
              label="激活">
               <template slot-scope="scope">
                      <el-tag :type="scope.row.state == '1'?'danger':'info'"  >{{scope.row.state == '1'?'是':'否'}}</el-tag>
              </template>
          </el-table-column>

          <el-table-column
              prop="weight"
              label="权重">
          </el-table-column>

          <el-table-column
            label="操作"
            
          >
              <template slot-scope="scope">  
                <el-button type="primary" size="small" @click="updateClick(scope.row)"><i class="el-icon-edit"/>编辑</el-button>
        
              </template>
          </el-table-column>
        
    </el-table>

        <!--添加轮播图弹窗-->
        <el-dialog :title="title == 1?'添加公告':'编辑公告'" :visible.sync="addVisible" width="28%">
                <el-form  :model="addForm" label-width="80px" >
                <el-form-item label="名称" >
                    <el-input clearable style="width:250px" size="small" v-model="addForm.name" ></el-input>
                </el-form-item>

                <el-form-item label="内容" >
                    <el-input type="textarea"
                    :rows="2"  style="width:250px" size="small" v-model="addForm.content" ></el-input>
                </el-form-item>

                <el-form-item label="权重" >
                    <el-input-number size="small" v-model="addForm.weight" :min="1" :max="10" label="描述文字"></el-input-number>
                </el-form-item>

                <el-form-item label="热度">
                    <el-radio-group v-model="addForm.isred">
                      <el-radio :label="'1'">强</el-radio>
                      <el-radio :label="'0'">弱</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="激活">
                    <el-radio-group v-model="addForm.state">
                      <el-radio :label="'1'">是</el-radio>
                      <el-radio :label="'0'">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button style="margin-left:200px" size="small" type="primary" @click="addToBack()">确 定</el-button>
                </el-form-item>
            </el-form>
            
        </el-dialog>

       
        
    </div>
</template>
<script>
export default {
    data() {
        return {
        addForm:{
            id:'',
            name:'',
            content:'',
            weight:'',
            isred:'',
            state:''
        },
        title:1,
         addVisible: false,
         tableForm:[],
        }
    },
    created(){
        this.getList();
    },
    methods:{
        updateClick(datas){
            this.addVisible = true;
            this.title = 2;
            this.addForm.id = datas.id;
            this.addForm.name = datas.name;
            this.addForm.content =datas.content;
            this.addForm.isred = datas.isred;
            this.addForm.state =datas.state;
        },
        addClick(){
            this.addVisible = true;
            this.clear();
            
        },
        clear(){ //清空
            this.addForm.name ="";
            this.addForm.content="";
            this.addForm.isred="";
            this.addForm.weight = ""
            this.addForm.state = ""
            this.addForm.id = ""
        },
        addToBack(){ //添加按键
            this.$api.post('/notice/addNotice',this.addForm,Response=>{
                if(Response.data.code == 200){
                    this.addVisible =false;    
                    this.getList();  
                }
            })
        },        
        getList(){ //获取数据
            this.$api.get('/notice/findNotice','',Response=>{
                if(Response.data.code == 200){
                       this.tableForm = Response.data.data;
                    }
            })
        },
       
       
    }
}
</script>